class OVue {
    constructor(options) {
        this.$data = options.data;
        this.$options = options;
        //劫持监听所有data中的属性
         this.observe(this.$data);
         new Complie(this.$options.el,this);
    }

    observe(data) {
        if (data == null || typeof data !== 'object') {
            return;
        }
        Object.keys(data).forEach(key => {
            this.defineReactive(data, key, data[key]);
            //属性代理
            this.ProxyProperty(key);
        })
    }
    defineReactive(obj, key, value) {
        this.observe(value);
        var dep=new Dep();
        Object.defineProperty(obj, key, {
            get() {
                Dep.target&&dep.addDep(Dep.target);
                return value;
            },
            set(NewVal) {
                if (NewVal === value) {
                    return;
                }
                value = NewVal;
                dep.notefy();
            }
        });
    }

    ProxyProperty(key){
        Object.defineProperty(this,key,{
            get(){
                return this.$data[key];
            },
            set(NewVal){
                this.$data[key]=NewVal;
            }
        })
    }
}

class Dep{
    constructor(){
        this.deps=[];
    }
    addDep(dep){
        this.deps.push(dep);
    }
    notefy(){
        this.deps.forEach(dep=>dep.update());
    }
}
class Watch{
    constructor(vm,key,cb){
        this.vm=vm;
        this.key=key;
        this.cb=cb;
        Dep.target=this;
        this.vm[this.key];
        Dep.target=null;
    }
    update(){
        //console.log("更新数据了");
        this.cb.call(this.vm,this.vm[this.key]);
    }
}